<!--
 * @Description: 申请售后首页
 * @Author: Kerwin
 * @Date: 2025-04-27 17:30:11
 * @LastEditTime: 2025-10-16 11:15:31
 * @LastEditors:  Please set LastEditors
-->
<template>
  <view class="content">
    <view class="content-t">
      <view class="bt"> 选择售后类型 </view>
      <view
        class="nr txbox"
        v-for="item in showArr"
        @click="handleClickItem(item)"
      >
        <view style="margin-right: 20rpx">
          <u-image width="60rpx" height="60rpx" :src="item.tp"></u-image>
        </view>
        <view>
          <view class="jcwz" style="margin-bottom: 20rpx">
            {{ item.text }}
          </view>
          <view class="hswz"> {{ item.des }} </view>
        </view>
      </view>
    </view>
    <view class="content-b">
      <view class="bt"> 选择商品 </view>
      <view class="nr txbox" v-for="item in orderData.goodsList" :key="item.id">
        <view style="border-radius: 10rpx; margin-right: 20rpx">
          <van-image
            width="180rpx"
            height="180rpx"
            :src="item.skuImage"
            style="border-radius: 30rpx"
          />
        </view>
        <view>
          <view class="jcwz overwz" style="width: 350rpx">{{ item.name }}</view>
          <view class="hswz" style="margin: 20rpx 0"
            >规格: {{ item.otherCheckStr }}</view
          >
          <view class="hswz">
            数量：{{ item.count }}
            <!-- <u-number-box
              class="step"
              :min="1"
              :max="3"
              v-model="item.count"
              @change="handleNumberChange"
              size="20"
            ></u-number-box> -->
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { reactive, ref, computed, nextTick } from 'vue'
import { onLoad, onReady } from '@dcloudio/uni-app'
import { orderApi, userApi, enumAll } from '@/api'
import hstb1 from '@/packageG/static/hstb1.png'
import hstb2 from '@/packageG/static/hstb2.png'
import hstb3 from '@/packageG/static/hstb3.png'
import hstb4 from '@/packageG/static/hstb4.png'

// 初始数据
const orderId = ref(0)
const orderProductSkuId = ref(0)
// 商品列表
const orderData = reactive({
  goodsList: [] as any,
  addressStr: '暂无收货地址，请先添加后下单',
  addressId: '',
  shopMode: uni.getStorageSync('shopMode'),
  orderStatus: '',
  scoreMoney: ''
})
const moneyResponse = ref()
const showArr = ref([
  {
    id: 1,
    tp: hstb1,
    text: '退款(无需退货)',
    des: '未收到货/已拒收，或与商家协商一致不用退货只退款'
  },
  {
    id: 2,
    tp: hstb2,
    text: '退货退款',
    des: '已收到货，需要寄回已收到的货物'
  },
  {
    id: 3,
    tp: hstb3,
    text: '换货补发',
    des: '已收到货，需要更换已收到的货物'
  },
  {
    id: 4,
    tp: hstb4,
    text: '不退货仅退款',
    des: '商家协商一致不用退货只退款'
  }
])
const count = ref(1)
const handleNumberChange = (e: any) => {
  console.log('当前值为: ' + e.value)
}
const handleClickItem = (obj: any) => {
  uni.navigateTo({
    url: `/packageG/pages/applyAfterService/applyDetail?orderId=${orderId.value}&orderProductSkuId=${orderProductSkuId.value}`
  })
  uni.setStorageSync('applyObj', JSON.stringify(obj))
}

// #region ******************************* 订单详情 ********************/

const byOrderId = async () => {
  const { data } = await orderApi.skuBaseInfo({
    detail: true,
    id: orderProductSkuId.value
  })

  // 商品详情
  orderData.goodsList.push(data)

  orderData.shopMode = uni.getStorageSync('shopMode')
}

// #endregion

onLoad((option: any) => {
  orderProductSkuId.value = option.orderProductSkuId
  orderId.value = option.orderId
  byOrderId()
})
</script>
<style lang="less" scoped>
.content {
  font-size: 24rpx;
  padding: 20rpx;
  .content-t,
  .content-b {
    .bt {
      font-size: 36rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
    }
    .nr {
      background-color: #fff;
      border-radius: 10rpx;
      padding: 20rpx;
      margin-bottom: 20rpx;
    }
  }
}
.jcwz {
  font-size: 28rpx;
  font-weight: bold;
}
.hswz {
  color: #999;
}
.overwz {
  //   单行文本省略号
  width: 100%;
  white-space: nowrap; /* 禁止文本换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 用省略号表示被截断的文本 */
}
.txbox {
  display: flex;
  align-items: center;
  border-radius: 40rpx;
}
</style>
